<template>
	<view class="setmeal-management">
		<!-- 搜索和添加区域 -->
		<view class="search-bar">
			<uni-search-bar v-model="searchKeyword" placeholder="输入名称" @confirm="handleSearch" @clear="handleSearchClear"
				cancelButton="none" style="flex: 1;" />
			<view class="category-select">
				<uni-data-select v-model="searchCategory" :localdata="categoryOptions" placeholder="全部分类" @change="handleSearch"
					style="width: 200rpx; margin-right: 10rpx;" />
			</view>
			<button class="add-btn" @click="showAddDialog">新增套餐</button>
		</view>

		<!-- 套餐列表 -->
		<view class="list-container">
			<view v-for="(setmeal,index) in filteredSetmeals" :key="setmeal._id" class="setmeal-card">
				<view class="card-left">
					<image class="setmeal-image" :src="setmeal.imageUrl" mode="aspectFill" @error="handleImageErr(setmeal)">
					</image>
					<view class="card-content">
						<view class="card-header">
							<text class="name"><text class="no">{{index+1}}</text>{{ setmeal.name }}</text>
							<text class="status" :class="{ 'status-disabled': setmeal.status === 0 }" @click="toggleStatus(setmeal)">
								{{ setmeal.status === 1 ? '已启售' : '已停售' }}
							</text>
						</view>
						<view class="card-body">
							<view class="info-item">
								<text class="price">¥{{ setmeal.price.toFixed(2) }}</text>
								<uni-icons type="settings" size="16"></uni-icons>
								<text class="category-name">{{ setmeal.categoryName }}</text>
							</view>
							<view class="info-item">
								<uni-icons type="info" size="16"></uni-icons>
								<text class="description">{{ setmeal.description || '暂无描述' }}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="card-right">
					<button class="action-btn edit-btn" @click="showEditDialog(setmeal)">修改</button>
					<button class="action-btn delete-btn" @click="confirmDelete(setmeal,index)">删除</button>
				</view>
			</view>

			<uni-load-more :status="loadStatus" @clickLoadMore="showMoreData"></uni-load-more>
			<view class="safe-area-box"></view>
		</view>

		<!-- 添加/编辑弹窗 -->
		<uni-popup ref="popup" type="dialog" style="z-index: 20;" :mask-click="false">
			<view class="popup-content">
				<view class="title-box">
					<text class="title-text">{{isEditMode?'修改套餐':'添加套餐'}}</text>
				</view>
				<view class="form-container">
					<uni-forms ref="form" :model="formData" :rules="rules">
						<uni-forms-item label="套餐名称" name="name" label-align="right">
							<uni-easyinput v-model="formData.name" placeholder="请输入套餐名称" />
						</uni-forms-item>
						<uni-forms-item label="套餐分类" name="categoryId" label-align="right">
							<uni-data-select v-model="formData.categoryId" :localdata="categoryOptions" placeholder="请选择分类" />
						</uni-forms-item>
						<uni-forms-item label="套餐价格" name="price" label-align="right">
							<uni-easyinput type="number" v-model.number="formData.price" placeholder="请输入价格" />
						</uni-forms-item>
						<uni-forms-item label="套餐图片" name="image" label-align="right">
							<view class="upload-container">
								<template v-if="formData.imageUrl">
									<image :src="formData.imageUrl" class="preview-image" mode="aspectFill" @click="chooseImage"
										@error="handleImageErr(formData)"></image>
								</template>
								<template v-else>
									<view class="image-placeholder" @click="chooseImage">
										<uni-icons type="plusempty" size="40" color="#999"></uni-icons>
									</view>
								</template>
							</view>
						</uni-forms-item>
						<uni-forms-item label="套餐描述" name="description" label-align="right">
							<uni-easyinput type="textarea" v-model="formData.description" placeholder="请输入套餐描述" />
						</uni-forms-item>
						<uni-forms-item label="包含菜品" name="dishes" label-align="right">
							<view class="dishes-container">
								<button class="add-dish" type="primary" size="mini" @click="showDishSelector">+ 添加菜品</button>
								<view v-if="formData.dishes && formData.dishes.length > 0" class="dishes-list">
									<view v-for="(dish, index) in formData.dishes" :key="index" class="dish-item">
										<view class="dish-name-price-box">
											<text class="dish-name">{{ dish.name }}</text>
											<text class="dish-price">¥{{ dish.price.toFixed(2) }}</text>
										</view>
										<uni-number-box v-model="dish.copies" :min="1" :max="99" />
										<uni-icons type="close" size="20" color="red" @click="removeDish(index)"></uni-icons>
									</view>
								</view>
							</view>
						</uni-forms-item>
					</uni-forms>
					<view style="height: 400rpx;"></view>
				</view>
				<view class="dialog-buttons">
					<button class="dialog-btn cancel-btn" @click="onCancelForm">取消</button>
					<button class="dialog-btn confirm-btn" @click="submitForm">确认</button>
				</view>
			</view>
		</uni-popup>

		<!-- 菜品选择器弹窗 -->
		<uni-popup ref="dishPopup" type="bottom" style="z-index: 30;" :mask-click="false">
			<view class="dish-selector">
				<view class="selector-header">
					<text class="title">选择菜品</text>
				</view>
				<view class="selector-content">
					<checkbox-group @change="onDishSelectionChange">
						<view v-for="(dish,index) in availableDishes" :key="dish._id" class="dish-option">
							<checkbox :value="dish._id" :checked="isDishSelected(dish._id)" />
							<!-- 							<image class="dish-thumb" :src="dish.imageUrl" mode="aspectFill" @error="handleDishImageErr(dish)">
							</image> -->
							<view class="dish-name-no-box">
								<text class="dish-no">{{index+1}}</text>
								<text class="dish-name">{{ dish.name }}</text>
							</view>
							<text class="dish-price">¥{{ dish.price.toFixed(2) }}</text>
						</view>
					</checkbox-group>
				</view>
				<view class="selector-footer">
					<button class="dialog-btn cancel-btn" @click="closeDishSelector">取消</button>
					<button class="dialog-btn confirm-btn" @click="confirmDishSelection">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted
	} from 'vue';
	import {
		addSetmeal,
		deleteSetmeal,
		getSetmeals,
		updateSetmeal,
		getSetmealDishes,
		updateSetmealStatus
	} from '../api/setmeal';
	import {
		getCategories
	} from '../api/category';
	import {
		getDishes
	} from '../api/dish';

	// 套餐数据
	const setmeals = ref([]);
	const searchKeyword = ref('');
	const searchCategory = ref('');
	let page = 1;
	let pageSize = 8;
	const loadStatus = ref('more');

	// 分类选项
	const categoryOptions = ref([]);

	// 弹窗相关
	const popup = ref(null);
	const dishPopup = ref(null);
	const form = ref(null);
	const isEditMode = ref(false);
	const formData = ref({});

	// 表单验证规则
	const rules = {
		name: {
			rules: [{
					required: true,
					errorMessage: '请输入套餐名称',
				},
				{
					minLength: 2,
					maxLength: 20,
					errorMessage: '套餐名称长度在2-20个字符之间'
				}
			]
		},
		categoryId: {
			rules: [{
				required: true,
				errorMessage: '请选择套餐分类'
			}]
		},
		price: {
			rules: [{
					required: true,
					errorMessage: '请输入套餐价格'
				},
				{
					format: 'number',
					minimum: 0.01,
					errorMessage: '价格必须大于0'
				}
			]
		},
		image: {
			rules: [{
				required: true,
				errorMessage: '请上传套餐图片'
			}]
		}
	};

	// 初始化加载分类数据
	onMounted(async () => {
		await loadCategories();
		getListData();
	});

	// 加载分类数据
	const loadCategories = async () => {
		const res = await getCategories({
			type: 2
		});
		categoryOptions.value = res.map(item => ({
			value: item._id,
			text: item.name
		}));
	};

	// 获取列表数据
	const getListData = async (page1 = 0) => {
		if (page1) {
			loadStatus.value = 'more';
			setmeals.value = [];
			page = page1;
		}
		if (loadStatus.value === 'loading') {
			return;
		}
		if (loadStatus.value === 'no-more') {
			uni.showToast({
				title: '没有更多数据了...',
				icon: 'none'
			});
			return;
		}

		loadStatus.value = 'loading';
		const res = await getSetmeals({
			keyword: searchKeyword.value.trim(),
			categoryId: searchCategory.value,
			page,
			pageSize
		});

		if (res && res.length > 0) {
			// 获取每个套餐的菜品列表
			// const setmealsWithDishes = await Promise.all(res.map(async setmeal => {
			// 	const dishesRes = await getSetmealDishes(setmeal._id);
			// 	return {
			// 		...setmeal,
			// 		imageUrl: setmeal.image,
			// 		dishes: dishesRes || []
			// 	};
			// }));

			setmeals.value.splice(setmeals.value.length, 0, ...res);
			setmeals.value.forEach(item => item.imageUrl = item.image)
		}

		if (!res || res.length < pageSize) {
			loadStatus.value = 'no-more';
		} else {
			loadStatus.value = 'more';
		}
	};

	// 触底刷新数据
	const showMoreData = () => {
		if (loadStatus.value === 'more') {
			page++;
			getListData();
		}
	};

	// 计算属性：过滤后的套餐列表
	const filteredSetmeals = computed(() => {
		if (!searchKeyword.value && !searchCategory.value) {
			return setmeals.value;
		}

		return setmeals.value.filter(setmeal => {
			const nameMatch = searchKeyword.value.trim() ?
				setmeal.name.toLowerCase().includes(searchKeyword.value.trim().toLowerCase()) : true;
			const categoryMatch = searchCategory.value ?
				setmeal.categoryId === searchCategory.value : true;
			return nameMatch && categoryMatch;
		});
	});

	const handleImageErr = async (setmeal) => {
		if (setmeal.image) {
			const res = await wx.cloud.getTempFileURL({
				fileList: [setmeal.image]
			});
			setmeal.imageUrl = res.fileList[0].tempFileURL;
		} else {
			setmeal.imageUrl = '';
		}
		console.log('获取到图片临时地址', setmeal.imageUrl);
	};

	// 搜索套餐
	const handleSearch = () => {
		getListData(1);
	};

	// 清空搜索
	const handleSearchClear = () => {
		searchKeyword.value = '';
		getListData(1);
	};

	let oldImageId = '';
	let newImageId = '';
	const clearNewImageId = () => {
		if (newImageId) {
			wx.cloud.deleteFile({
				fileList: [newImageId]
			});
		}
		newImageId = '';
	};

	// 选择图片
	const chooseImage = async () => {
		try {
			const chooseRes = await uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
			});

			const tempFilePath = chooseRes.tempFilePaths[0];

			// 上传到云存储
			const cloudFileName = `images/${Date.now()}-${Math.floor(Math.random() * 1000)}.jpg`;
			const uploadRes = await wx.cloud.uploadFile({
				filePath: tempFilePath,
				cloudPath: cloudFileName,
			});

			clearNewImageId();
			newImageId = uploadRes.fileID;
			formData.value.image = formData.value.imageUrl = uploadRes.fileID;

			uni.showToast({
				title: '上传成功',
				icon: 'success'
			});
		} catch (err) {
			console.error('上传失败:', err);
			uni.showToast({
				title: '上传失败',
				icon: 'none'
			});
		}
	};

	const userInfo = wx.getStorageSync('userInfo') || {};

	// 显示添加弹窗
	const showAddDialog = async () => {
		oldImageId = '';
		clearNewImageId();

		isEditMode.value = false;
		formData.value = {
			name: '',
			categoryId: '',
			categoryName: '',
			price: 0,
			image: '',
			imageUrl: '',
			description: '',
			status: 0, // 默认启用
			dishes: [],
			createUser: userInfo.empId,
			updateUser: userInfo.empId
		};
		popup.value.open();
	};

	let setmealItem = {};
	let setmealDishesTemp = JSON.stringify([])
	// 显示编辑弹窗
	const showEditDialog = async (setmeal) => {
		oldImageId = setmeal.image;
		clearNewImageId();
		setmealItem = setmeal;
		isEditMode.value = true;

		// 获取套餐菜品详情
		const dishesRes = await getSetmealDishes(setmeal._id);
		setmealDishesTemp = JSON.stringify(dishesRes)

		formData.value = {
			_id: setmeal._id,
			name: setmeal.name,
			categoryId: setmeal.categoryId,
			categoryName: setmeal.categoryName,
			price: setmeal.price,
			image: setmeal.image,
			imageUrl: setmeal.imageUrl,
			description: setmeal.description,
			status: 0,
			dishes: dishesRes || [],
			updateUser: userInfo.empId
		};

		popup.value.open();
	};

	// 菜品选择相关
	const availableDishes = ref([]);
	const selectedDishIds = ref([]);

	// 显示菜品选择器
	const showDishSelector = async () => {
		// 获取所有启用的菜品
		const res = await getDishes();

		availableDishes.value = res || [];
		selectedDishIds.value = formData.value.dishes?.map(dish => dish.dishId) || [];

		dishPopup.value.open();
	};

	// 关闭菜品选择器
	const closeDishSelector = () => {
		dishPopup.value.close();
	};

	// 检查菜品是否已选中
	const isDishSelected = (dishId) => {
		return selectedDishIds.value.includes(dishId);
	};

	// 菜品选择变化
	const onDishSelectionChange = (e) => {
		selectedDishIds.value = e.detail.value;
	};

	// 确认选择的菜品
	const confirmDishSelection = () => {
		const selectedDishes = availableDishes.value
			.filter(dish => selectedDishIds.value.includes(dish._id))
			.map(dish => ({
				dishId: dish._id,
				name: dish.name,
				price: dish.price,
				copies: 1 // 默认1份
			}));

		// 保留已存在菜品的份数
		formData.value.dishes?.forEach(existingDish => {
			const selectedDish = selectedDishes.find(d => d.dishId === existingDish.dishId);
			if (selectedDish) {
				selectedDish.copies = existingDish.copies;
			}
		});

		formData.value.dishes = selectedDishes;
		dishPopup.value.close();
	};

	// 移除菜品
	const removeDish = (index) => {
		formData.value.dishes.splice(index, 1);
	};

	// 提交表单
	const submitForm = async () => {
		try {
			await form.value.validate();
			// 设置分类名称
			formData.value.categoryName = categoryOptions.value.find(
				item => item.value === formData.value.categoryId
			)?.text || '';

			// 处理图片
			if (!formData.value.image) {
				uni.showToast({
					title: '请添加图片',
					icon: 'error'
				});
				return;
			}

			// 检查是否选择了菜品
			if (!formData.value.dishes || formData.value.dishes.length === 0) {
				uni.showToast({
					title: '请至少添加一个菜品',
					icon: 'none'
				});
				return;
			}

			if (formData.value.price === 0) {
				const res = await wx.showModal({
					title: '提示',
					content: '你确定价格是0元吗？',
					cancelText: '改一下',
					confirmText: '确定'
				})
				if (res.cancel) {
					return
				}
			}

			// 删除临时字段
			delete formData.value.imageUrl;

			if (isEditMode.value) {
				if (JSON.stringify(formData.value.dishes) === setmealDishesTemp) {
					delete formData.value.dishes
				}

				// 更新套餐
				await updateSetmeal(formData.value);
				// 更新本地数据
				Object.assign(setmealItem, formData.value);
				setmealItem.imageUrl = setmealItem.image

				uni.showToast({
					title: '修改成功',
					icon: 'success'
				});
			} else {
				// 添加套餐
				await addSetmeal(formData.value);

				uni.showToast({
					title: '添加成功',
					icon: 'success'
				});
				getListData(1);
			}

			if (newImageId && oldImageId) {
				wx.cloud.deleteFile({
					fileList: [oldImageId]
				});
			}
			newImageId = '';
			oldImageId = ''

			popup.value.close();
		} catch (error) {
			console.error('提交失败:', error);
			uni.showToast({
				title: '提交失败',
				icon: 'none'
			});
		}
	};

	const onCancelForm = () => {
		clearNewImageId();
		oldImageId = '';
		popup.value.close();
	};

	// 切换套餐状态
	const toggleStatus = async (setmeal) => {
		await updateSetmealStatus({
			_id: setmeal._id,
			status: setmeal.status === 1 ? 0 : 1
		});
		setmeal.status = setmeal.status === 1 ? 0 : 1;
		uni.showToast({
			title: setmeal.status === 1 ? '已启售' : '已停售',
			icon: 'success'
		});
	};

	// 删除套餐
	const confirmDelete = async (setmeal, index) => {
		if (setmeal.status === 1) {
			uni.showToast({
				title: '启售状态，不能删除',
				icon: 'none'
			});
			return;
		}

		const res = await uni.showModal({
			title: '提示',
			content: '确定要删除该套餐吗？',
		});

		if (res.cancel) {
			return;
		}

		await deleteSetmeal(setmeal._id, setmeal.image);
		// setmeals.value.splice(index, 1)
		getListData(1);
		uni.showToast({
			title: '删除成功',
			icon: 'success'
		});
	};

	defineExpose({
		showMoreData
	});
</script>

<style lang="scss" scoped>
	.setmeal-management {
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: #f5f5f5;
	}

	.search-bar {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx 20rpx 20rpx;
		background-color: #ffffff;
		border-bottom: 1rpx solid #eee;
		box-sizing: border-box;
		width: 100%;
		height: 150rpx;
		position: fixed;
		top: 80rpx;
		left: 0;
		z-index: 5;

		.category-select {
			display: flex;
			flex-direction: column;
			justify-content: center;
			height: 100%;
			width: 220rpx;
		}

		.add-btn {
			margin-left: 5rpx;
			font-size: 28rpx;
			height: 70rpx;
			line-height: 70rpx;
			border-radius: 8rpx;
			padding: 0 20rpx;
			background-color: #ff5a5f;
			color: white;
			font-weight: 700;
		}
	}

	.list-container {
		flex: 1;
		padding: 20rpx;
		margin-top: 225rpx;
	}

	.setmeal-card {
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: #fff;
		border-radius: 12rpx;
		padding: 20rpx 20rpx 10rpx;
		margin-bottom: 15rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);

		.card-left {
			display: flex;
			width: 85%;

			.setmeal-image {
				width: 135rpx;
				height: 135rpx;
				border-radius: 8rpx;
				margin-right: 20rpx;
			}

			.card-content {
				flex: 1;
				max-width: 420rpx;

				.card-header {
					display: flex;
					align-items: center;
					margin-bottom: 16rpx;

					.name {
						font-size: 32rpx;
						font-weight: bold;
						margin-right: 16rpx;

						.no {
							display: inline-flex;
							font-size: 28rpx;
							width: 40rpx;
							border-radius: 25rpx;
							justify-content: center;
							align-items: center;
							color: #fa8c16;
							line-height: 100%;
						}
					}

					.status {
						padding: 2rpx 4rpx;
						border-radius: 4rpx;
						font-size: 24rpx;
						background-color: #52c41a;
						color: #fff;

						&.status-disabled {
							background-color: #fa8c16;
							color: #fff;
						}
					}
				}

				.card-body {
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;

					.info-item {
						display: flex;
						align-items: center;
						margin-bottom: 12rpx;
						font-size: 26rpx;
						color: #666;

						.price {
							font-size: 28rpx;
							color: #ff4d4f;
							font-weight: bold;
							width: 140rpx;
							margin-left: 10rpx;
						}

						.category-name,
						.dishes-count {
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							max-width: 225rpx;
						}

						uni-icons {
							margin-right: 8rpx;
							color: #999;
						}

						.description {
							color: #999;
							font-size: 24rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							max-width: 465rpx;
						}
					}
				}
			}
		}

		.card-right {
			width: 15%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			align-items: flex-end;

			.action-btn {
				margin-bottom: 10rpx;
				font-size: 26rpx;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 8rpx;
				padding: 0 20rpx;

				&.edit-btn {
					background-color: #eee;
					color: #999;
				}

				&.delete-btn {
					background-color: #ff5a5f;
					color: white;
					font-weight: 700;
				}
			}
		}
	}

	.safe-area-box {
		height: env(safe-area-inset-bottom);
	}

	.popup-content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		background-color: #fff;
		width: 90vw;
		border-radius: 20rpx;
		height: 80vh;
		z-index: 10;

		.title-box {
			box-sizing: border-box;
			display: flex;
			width: 100%;
			justify-content: center;
			padding: 40rpx 0;
			background-color: #f5f5f5;
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
			border-radius: 20rpx 20rpx 0 0;

			.title-text {
				font-size: 40rpx;
				font-weight: 700;
				color: #666;
			}
		}

		.form-container {
			flex: 1;
			padding: 50rpx;
			overflow-y: auto;
			max-height: 60vh;
			box-sizing: border-box;

			.upload-container {
				display: flex;
				align-items: center;

				.preview-image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 8rpx;
					margin-right: 20rpx;
				}

				.image-placeholder {
					width: 120rpx;
					height: 120rpx;
					border-radius: 8rpx;
					margin-right: 20rpx;
					border: 1px dashed #ccc;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #f9f9f9;
				}
			}

			.dishes-container {
				display: flex;
				flex-direction: column;
				gap: 20rpx;

				.add-dish {
					background-color: #ff5a5f;
					margin: 0;
				}

				.dishes-list {
					display: flex;
					flex-direction: column;
					gap: 15rpx;

					.dish-item {
						display: flex;
						align-items: center;
						padding: 15rpx;
						background-color: #f9f9f9;
						border-radius: 8rpx;

						.dish-name-price-box {
							display: flex;
							flex-direction: column;
							flex: 1;
							gap: 8rpx;

							.dish-name {
								font-size: 26rpx;
							}

							.dish-price {
								font-size: 26rpx;
								color: #ff4d4f;
								text-align: left;
							}
						}

						uni-number-box {
							width: 160rpx;
							margin-right: 10rpx;
						}
					}
				}
			}
		}

		.dialog-buttons {
			display: flex;
			justify-content: space-between;
			padding: 30rpx;
			background-color: #f5f5f5;
			border-radius: 0 0 20rpx 20rpx;
			box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.3);

			.dialog-btn {
				flex: 1;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 8rpx;
				font-size: 28rpx;

				&.cancel-btn {
					background-color: #eee;
					color: #999;
					margin-right: 20rpx;
				}

				&.confirm-btn {
					background-color: #ff5a5f;
					color: white;
					font-weight: 700;
				}
			}
		}
	}

	.dish-selector {
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		max-height: 70vh;
		display: flex;
		flex-direction: column;

		.selector-header {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 40rpx;
			background-color: #f5f5f5;
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
			border-radius: 20rpx 20rpx 0 0;

			.title {
				font-size: 32rpx;
				font-weight: bold;
			}
		}

		.selector-content {
			flex: 1;
			overflow-y: auto;
			padding: 20rpx 50rpx;

			.dish-option {
				display: flex;
				align-items: center;
				padding: 20rpx 0;
				border-bottom: 1rpx solid #f0f0f0;

				// .dish-thumb {
				// 	width: 80rpx;
				// 	height: 80rpx;
				// 	border-radius: 8rpx;
				// 	margin: 0 20rpx;
				// }

				.dish-name-no-box {
					display: flex;
					flex: 1;

					.dish-no {
						width: 50rpx;
						color: #fa8c16;
						text-align: center;
					}

					.dish-name {
						flex: 1;
						font-size: 28rpx;
					}

				}


				.dish-price {
					width: 120rpx;
					font-size: 28rpx;
					color: #ff4d4f;
					text-align: right;
				}
			}
		}

		.selector-footer {
			display: flex;
			justify-content: space-between;
			padding: 30rpx 60rpx;
			background-color: #f5f5f5;
			box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.3);

			.dialog-btn {
				flex: 1;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 8rpx;
				font-size: 28rpx;

				&.cancel-btn {
					background-color: #eee;
					color: #999;
					margin-right: 20rpx;
				}

				&.confirm-btn {
					background-color: #ff5a5f;
					color: white;
					font-weight: 700;
				}
			}
		}
	}
</style>